import React, {Component} from 'react'

import Router from 'next/router'
import LazyLoad from 'react-lazyload'
import PlaceholderComponent from '../../Placeholder'
import {bindActionCreators} from 'redux'
import {addToCard} from '../../../actions/detail/index';
import {connect} from 'react-redux';
import { getCarNum } from '../../../actions/headers/index';

import Toast from 'antd-mobile/lib/toast';
let Icon = require('antd/lib/icon');



class ListOne extends Component {
    constructor(props) {
        super(props);
        this.state = {
            timeHere: 0,
        }
    };
    toDetail = (id) =>{
        if(this.props.home.isFb){
            Router.push({
                pathname: '/detail',
                query: {
                    itemId: id,
                    isFb:1
                }
            })
        }else {
            Router.push({
                pathname: '/detail',
                query: {
                    itemId: id
                }
            })
        }
    };

    addToCart = (part, index) => {
        //切换按钮状态
        this.setState({
            cardLoading: true
        })

        /*itemId price spec_key quantity*/
        if (part.specList.length > 1) {
            if(this.props.home.isFb){
                Router.push({
                    pathname: '/detail',
                    query: {
                        itemId: part.itemId,
                        isFb:1
                    }
                })
            }else {
                Router.push({
                    pathname: '/detail',
                    query: {
                        itemId: part.itemId
                    }
                })
            }
        } else {
            var specId = "0";
             if(part.specList && part.specList.length == 1){
                specId = part.specList[0].id;
             }
            let price = part.discount != null ? part.discount.amount : part.price
            this.props.addToCard({
                    itemId: part.itemId,
                    price: price,
                    specId: specId,
                    quantity: 1
                })
                .then(res => {
                    if (res.data.success) {
                        //购物车效果
                        this.props.getCarNum();
                        Toast.info('Add to cart successful !', 1);
                    } else {
                        Toast.info(res.data.message, 1);
                        this.setState({
                            cardLoading: false
                        })
                    }
                }).catch((error) => {
                    this.setState({
                        cardLoading: false
                    })
                });
        }

    }

    componentDidMount() {
        this.timer = setInterval(() => {
            this.setState({
                timeHere: this.state.timeHere + 1
            })
        }, 1000)
    }

    componentWillUnmount() {
        clearInterval(this.timer)
    }

    componentWillReceiveProps(nextProps) {

    }

    render() {
        return (
            <div className='list-one'>
                {
                    this.props.listData.map((part,index)=>(
                        <div className='part' key={index}>
                            <div className='left-img' onClick={()=>this.toDetail(part.itemId)}>
                                <LazyLoad offset={[-200, 0]} placeholder={<PlaceholderComponent />} >
                                    <img className='img-left' src={part.image}/>
                                </LazyLoad>
                            </div>
                            <div className='right-info'>
                                {
                                    part.discount ?
                                        <div className='sale'>
                                            <span className='sale-span'>SALE</span>
                                            <span className='sale-spans'>{-(10-part.discount.discountRate).toFixed(2)*10}%</span>
                                        </div> : ''
                                }
                                {
                                    part.brokerage?
                                        <div className='sale'>
                                            <span className='sale-span'>GET</span>
                                            <span className='sale-spans'>${part.brokerage}</span>
                                        </div> : ''
                                }
                                <div className='title'>
                                    {part.name}
                                </div>
                                <div className='price'>
                                    <span className='price-symbol'>$</span>
                                    <span className='price-primary'>{part.discount!=null?part.discount.amount:part.priceMin}</span>
                                    {
                                        part.discount!=null?<span className='price-sale'>${part.priceMin}</span>:''
                                    }
                                </div>
                                {
                                    part.discount?
                                        <div className='time'>
                                            <div>
                                                <span>{Math.floor((part.discount.duration-this.state.timeHere)/(60*60*24))}</span>
                                                <span>DAYS</span>
                                            </div>
                                            <div>
                                                <span>{Math.floor(((part.discount.duration-this.state.timeHere)%(60*60*24))/(60*60))}</span>
                                                <span>HR</span>
                                            </div>
                                            <div>
                                                <span>{Math.floor((((part.discount.duration-this.state.timeHere)%(60*60*24))%(60*60))/60)}</span>
                                                <span>MIN</span>
                                            </div>
                                            <div>
                                                <span>{
                                                    Math.floor((((part.discount.duration-this.state.timeHere)%(60*60*24))%(60*60))%60)
                                                }</span>
                                                <span>SEC</span>
                                            </div>
                                        </div> :''
                                }
                                <div className='operate'>
                                    <div className='botton' style={this.props.home.isFb ? { width:'5rem'} : {width: '100%'}}  onClick={()=>this.addToCart(part,index)}>
                                        <Icon type="shopping-cart" />
                                        <span>ADD TO CART</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        ))
                }    				
    			</div>
        )
    }
}


const mapStateToProps = ({home}) => ({
    home
});

const mapDispatchToProps = (dispatch) => {
    return {
        addToCard: bindActionCreators(addToCard, dispatch),
        getCarNum: bindActionCreators(getCarNum ,dispatch)
    }
};
export default connect(mapStateToProps, mapDispatchToProps)(ListOne)

